<template lang="pug">
  modal-form(
    :title="'执法视频' + (id ? '编辑' : '执法视频添加')"
    :visible.sync="visibleDialog"
    width="640px"
    :formItems="importItems"
    :submitting="submitting"
    :formSubmit="submitHandle"
    @close="visibleDialog = false"
  )
    el-alert.warningBox(type="warning" :closable="false" slot="alert")
      div.c_regular
        p 1.输入执法地点，选择拍摄日期，并填写备注信息;
        p 2.点击上传文件按钮，选择文件确认后即开始上传;
        p 3.仅支持后缀为
          span(class="c_warning") .zip和.rar
          | 的文件上传，且单个文件不超过
          span(class="c_warning") 500M;
        p 4.点击确认并提交后，该条已上传的执法视频既进入到执法视频库
</template>
<script>
import { ModalForm } from '@/components'
import { lawVideoInfo } from '@/api/libary'

export default {
  components: {
    ModalForm
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    importItems () {
      const { info } = this
      return [
        {
          key: 'medinsId',
          label: '执法地点',
          type: 'orgselect',
          selectType: 2,
          initialValue: (info.deptId || info.medinsId) ? [info.medinsId, info.deptId] : null,
          initName: (info.deptName || info.medinsName) ? info.medinsName + (info.deptName ? ('/' + info.info.deptName) : '') : null,
          rules: [{ required: true, message: '请选择' }],
          layoutCol: { sm: 12, md: 12, lg: 12 }
        },
        {
          key: 'lawTime',
          label: '拍摄时间',
          type: 'datetime',
          initialValue: info.lawTime,
          rules: [{ required: true, message: '请选择' }],
          layoutCol: { sm: 12, md: 12, lg: 12 }
        },
        {
          key: 'remark',
          label: '备注',
          type: 'textarea',
          initialValue: info.remark,
          placeholder: '请输入备注信息(如执法的目的、结果、请尽量精简、便于事后查询)',
          rules: [{ required: true, message: '请输入导入目录' }],
          maxlength: 200,
          'show-word-limit': true
        },
        {
          key: 'files',
          label: ' ',
          type: 'upload',
          btnText: '上传文件',
          accept: '.zip,.rar',
          limitSize: 500,
          initialValue: info.upload,
          suffix: '(仅支持zip,rar压缩包格式文件上传)',
          rules: [{ required: true, message: '请输入导入目录' }]
        }
      ]
    }
  },
  watch: {
    visible (val) {
      if (val) {
        this.getData()
      }
    }
  },
  data () {
    return {
      info: {},
      loading: false,
      submitting: false
    }
  },
  methods: {
    // 获取详情
    getData () {
      if (this.id) {
        lawVideoInfo(this.id).then(res => {
          this.info = res
        })
      }
    },
    submitHandle (vals) {
      console.log(vals)
    }
  }
}
</script>
<style lang="scss" scoped>
.warningBox{
  padding: 12px;
  margin-bottom: 20px;
  p {
    line-height: 1.8
  }
}
</style>
